/* eslint-disable camelcase */
import React, { useEffect } from 'react';
import { Table, Tree } from 'choerodon-ui/pro';
import {
  Page, Header, Breadcrumb, Content, HeaderButtons, Choerodon,
} from '@choerodon/master';
import { useParams, useHistory, useLocation } from 'react-router';
import { Loading } from '@choerodon/components';
import { get } from '@choerodon/inject';
import { observer } from 'mobx-react-lite';
import ScrollContext from 'react-infinite-scroll-component';
// @ts-ignore
import queryString from 'query-string';
import Sider from './components/Sider';
import BasicDetail from './components/BasicDetail';
import RecordDetail from './components/RecordDetail';
import { executeRecord } from '../deployment-list/service';
import { useDetailStore } from './stores';

import './index.less';
import useGetPersonalToken from '../../hooks/useGetPersonalToken';

const { Column } = Table;
interface Iprops{

}
const Index:React.FC<Iprops> = (props:Iprops) => {
  const {
    prefixCls,
    siderDs,
    dyDetailStore,
    pipDetailDs,
    projectId,
    recordDetailDs,
  } = useDetailStore();
  const params = useParams<any>();
  const history = useHistory();
  const { search } = useLocation();
  const { audit_flag } = queryString.parse(search);
  const [personalToken] = useGetPersonalToken(projectId);

  const { id: pipelineId }: { id: string } = params;
  const handelRefresh = () => {
    dyDetailStore.setAuditFlag(false);
    siderDs.setQueryParameter('audit_flag', false);
    siderDs.query();
    pipDetailDs.query();
    dyDetailStore.setIndex(-100);
    dyDetailStore.setFlag(0);
  };

  const handleEditPineline = (id:string) => {
    history.push({
      pathname: '/devops/continuous-deployment/operation/edit',
      search: `${search}&pipelineId=${pipelineId}&personalToken=${personalToken}`,
    });
  };
  // 运行
  const handeleRun = async () => {
    try {
      const res = await executeRecord(projectId, pipelineId);
      if (res) {
        handelRefresh();
      }
    } catch (e) {
      Choerodon.handleResponseError(e);
    }
  };

  // 头部按钮
  const getHeaderButtons = () => {
    const res = [
      {
        name: '修改',
        icon: 'rate_review1',
        display: true,
        handler: () => { handleEditPineline(pipelineId); },
      },
      {
        name: '运行',
        icon: 'cloud_done-o',
        permissions: ['choerodon.code.project.deploy.continuous-deployment.ps.execute'],
        display: true,
        handler: () => handeleRun(),
      },
      {
        icon: 'refresh',
        display: true,
        handler: () => handelRefresh(),
      },
    ];
    return <HeaderButtons items={res} showClassName={false} />;
  };
    // 加载更多
  const loadMoreTreeData = async () => {
    siderDs.setQueryParameter('audit_flag', audit_flag);
    siderDs.queryMore(siderDs.currentPage + 1);
  };
  return (
    <Page>
      <Header>
        {getHeaderButtons()}
      </Header>
      <Breadcrumb title="查看流水线" />
      <Content className={`${prefixCls}-content`}>
        {
         (!siderDs || siderDs.status !== 'ready') ? <Loading display type={get('configuration.master-global:loadingType') || 'c7n'} />
           : (
             <ScrollContext
               className={`${prefixCls}-content-sider`}
               dataLength={siderDs.length}
               next={loadMoreTreeData}
               hasMore={dyDetailStore.getTreeDataHasMore}
               loader={null}
               height="100%"
             >
               <Sider siderDs={siderDs} prefixCls={prefixCls} />
             </ScrollContext>
           )
      }
        {
         (!pipDetailDs || pipDetailDs.status !== 'ready') ? <Loading display type={get('configuration.master-global:loadingType') || 'c7n'} />
           : (
             <div className={`${prefixCls}-content-detail`}>
               {
                 dyDetailStore.getFlag === 0 ? <BasicDetail /> : <RecordDetail />
               }
             </div>
           )
      }
      </Content>
    </Page>
  );
};
export default observer(Index);
